<!DOCTYPE html>
<html lang="en">
<head>
    <title>朝圣"菱"距离</title>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> -->
    
    
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <link rel="stylesheet" type="text/css" href="css/example.css"/>
    <link rel="stylesheet" type="text/css" href="css/animate.css"/>
    <link rel="stylesheet" type="text/css" href="css/sweet-alert.css"/>
    
    
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-form.js"></script>
    <!-- <script type="text/javascript" src="js/ajaxfileupload.js"></script> -->
    
    <script type="text/javascript" src="js/media.js"></script>
    <script type="text/javascript" src="js/sweet-alert.js"></script>
	<script type="text/javascript" src="../js/common/common.js"></script>
	<script type="text/javascript" src="../js/common/wechatCommon.js"></script>
    
	<style>
        img{
            width: 100%;
            height: 100%;
            border-radius: .2rem;
        }
        .bar {
		    height: 18px;
		    background: green;
		}
    </style>
</head>
<body>
	<div class="page3">
        <div class="example_photo background_photo">
            <div class="photo_desc">
            </div>
        </div>
        <div class="upload">
        	<div id="uploaddiv">
        		<form id="uploadForm" name="uploadForm" method="post">
	        		<input accept="image/*" type="file" id="imgFile" name="imgFile" onchange="xmTanUploadImg(this)">
	        	</form>
        	</div>
            <a href="javascript:void(0);" class="upload_btn" onclick="choiceFile()"></a>
        </div>
        <div class="group_photo">
            <img src="" id="userUpload" onchange="upload();">
        </div>
    </div>
    
   	<div class="dialog">
		<div class="dialog_mask"></div>
		<div class="modal1"></div>
	</div>
   
	<script type="text/javascript">
	
		function choiceFile(){
			$("#imgFile").click();
		}
		
		$(document).ready(function(){
			$("#uploaddiv").hide();
			$(".dialog").hide();
		});
		
		var rootPath = getRootPath();
		
		function doUpload() {
 			var formData = new FormData();
            formData.append("imgFile", document.getElementById("imgFile").files[0]);
			$.ajax({
				headers: {'Cookie' : document.cookie },
				url: rootPath + "/pointActivity/api/v1/uploadPhoto", 
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                beforeSend: function(request) {
                	$(".dialog").show();
               },
                success: function (data) {
                	$(".dialog").hide();
                    if(data == "1"){
                    	sweetAlert({
                    		  title: "朝圣\"菱距离\"",
                    		  text: "您的照片我们已收到,请等待工作人员审核.",
                    		  type: "success",
                    		  showCancelButton: false,
                    		  confirmButtonColor: "#DD6B55",
                    		  confirmButtonText: "好的",
                    		  closeOnConfirm: false
                    		}, function(){
                    			window.location.href = rootPath + "/views/jq.html?isInit=true";
                    		});
                    } else {
                    	sweetAlert({
                    		  title: "朝圣\"菱距离\"",
                    		  text: "照片上传失败,请确认网络良好的情况下.尝试重新上传.我们期待着您.",
                    		  type: "error",
                    		  showCancelButton: false,
                    		  confirmButtonColor: "#DD6B55",
                    		  confirmButtonText: "好的",
                    		  closeOnConfirm: false
                    		}, function(){
								$("#userUpload").attr("src","");
								$("#imgFile").val("");
                    		});
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                	$(".dialog").hide();
                	alert(jqXHR.responseText);
                    alert(jqXHR.status);
                    alert(jqXHR.readyState);
                    alert(jqXHR.statusText);
                    alert(textStatus);
                    alert(errorThrown);
                }
            });
		}
		
        function xmTanUploadImg(obj) {
            var file = obj.files[0];
            if((file.size / 1024) > 5120){
            	alert("图片太大了");
            }
            var reader = new FileReader();

            reader.onloadstart = function (e) {}
            reader.onprogress = function (e) {}
            reader.onabort = function (e) {}
            reader.onerror = function (e) {}
            reader.onload = function (e) {
                $("#userUpload").attr("src",e.target.result);
				swal({title:"朝圣\"菱距离\"",  
					  text:"确认上传照片.?",  
					  type:"info",  
                      showCancelButton:true,  
                      confirmButtonColor:"#DD6B55",  
                      confirmButtonText:"是的,我确认上传这张照片.",  
                      cancelButtonText:"再考虑考虑.",  
                      closeOnConfirm:false,  
                      closeOnCancel:false  
                     },confirmUploadPhoto());
            }
            reader.readAsDataURL(file);
        }
        
        function confirmUploadPhoto(){
        	$(".confirm").unbind().bind("click",function(){
        		$(".confirm").unbind();
				doUpload();
        	});
        	$(".cancel").unbind().bind("click",function(){
                $(".cancel").unbind();
                $("#userUpload").attr("src","");
                $("#imgFile").val("");
        	});
        }
	</script>
</body>
</html>